<template>
    <div class="common-layout">
        <el-container>
          <el-aside width="auto" style="box-shadow: 0 0 5px 8px rgb(89, 101, 116);">
            <side-menu></side-menu>
          </el-aside>
          <el-container>
            <el-header style="box-shadow: 0 0 2px 2px rgb(89, 101, 116);"><common-header></common-header></el-header>
            <common-tag></common-tag>
            <el-main >
              <router-view v-slot="{ Component }">
                <transition class="z-child" name="mid">
                  <component :is="Component" ></component>
                </transition>
              </router-view>
            </el-main>
          </el-container>
        </el-container>
      </div>
</template>
<script>
    import SideMenu from '@/components/SideMenu';
    import CommonHeader from '@/components/CommonHeader';
    import CommonTag from '@/components/CommonTag';

    export default{
        name:'MainVue',
        components:{
            SideMenu,
            CommonHeader,
            CommonTag,
        }
    }
</script>
<style scoped> 
  .el-header{
    padding: 0;
  }
  .mid-enter-from{
    opacity: 0;
    transform: translateX(-20px);
  }
  .mid-leave-to{
    opacity: 0;
    transform: translateX(-10px);
    display: none;
  }
  .z-child {
    transition: .6s cubic-bezier(.17,0,.1,1);
  }
</style>